<script setup lang='ts'>
import { getUserDataAPI } from '@/apis'; // 引入获取用户数据的API函数
import auth from '@/utils/auth'; // 引入认证工具
import { HomeFilled, Promotion, Document, Unlock } from '@element-plus/icons-vue'; // 引入Element Plus的图标组件
import { ElMessage, ElMessageBox } from 'element-plus'; // 引入Element Plus的消息提示和消息框组件
import { onMounted, ref } from 'vue'; // 引入Vue的生命周期钩子和响应式API
import { useRouter } from 'vue-router'; // 引入Vue Router的路由实例

const router = useRouter(); // 获取路由实例

// 定义一个响应式变量来存储用户名
const username = ref('');

// 定义退出登录的方法
const logout = () => {
  // 弹出确认框
  ElMessageBox.confirm(
    '确定要退出登录吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 用户点击确定后，移除token
      auth.removeToken();
      // 显示退出成功的消息提示
      ElMessage({
        type: 'success',
        message: '退出成功',
      });
      // 跳转到登录页面
      router.push('/login');
    })
    .catch(() => {
      // 用户点击取消后，显示取消退出的消息提示
      ElMessage({
        type: 'info',
        message: '取消退出',
      });
    });
};

// 在组件挂载后执行
onMounted(async () => {
  // 调用API获取用户数据
  const res = await getUserDataAPI();
  // 将返回的用户名赋值给响应式变量
  username.value = res.data.name;
});
</script>

<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <div class="logo"></div> <!-- logo区域 -->
      <!-- 菜单栏 -->
      <el-menu background-color="#023" :default-active="$route.path" text-color="#fff" router
        style="border-right: none">
        <!-- 数据概览菜单项 -->
        <el-menu-item index="/">
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>数据概览</span>
        </el-menu-item>
        <!-- 内容管理菜单项 -->
        <el-menu-item index="/article">
          <el-icon>
            <Document />
          </el-icon>
          <span>内容管理</span>
        </el-menu-item>
        <!-- 发布文章菜单项 -->
        <el-menu-item index="/publish">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>发布文章</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <span>{{ username }}</span> <!-- 显示用户名 -->
        <!-- 退出登录链接 -->
        <el-link @click="logout">
          <el-icon class="el-icon--left">
            <Unlock />
          </el-icon>
          退出
        </el-link>
      </el-header>
      <!-- 主要内容区域，用于渲染子路由组件 -->
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-aside {
  background-color: #023;
  height: 100vh;
  /* 设置侧边栏高度为视口高度 */

}

.logo {
  width: 200px;
  height: 60px;
  background: #023 url('@/assets/images/logo.png') no-repeat center / 160px auto;
  /* 设置logo背景 */
}

.el-header {
  border-bottom: 1px solid #ddd;
  /* 设置底部边框 */
  display: flex;
  justify-content: flex-end;
  /* 内容靠右对齐 */
  align-items: center;
  /* 垂直居中 */
  gap: 10px;
  /* 设置内容间距 */
}
</style>